<template>
  <div>
    <div class="add-container">
      <div class="add-title">
        <h1>添加收货地址</h1>
      </div>
      <div class="add-box">
        <Form
          :model="formData"
          label-position="left"
          :label-width="100"
          :rules="ruleInline"
        >
          <FormItem label="收件人" prop="name">
            <i-input v-model="formData.name" size="large"></i-input>
          </FormItem>
          <FormItem label="收件地区" prop="address">
            <Distpicker
              :province="formData.province"
              :city="formData.city"
              :area="formData.area"
              @province="getProvince"
              @city="getCity"
              @area="getArea"
            ></Distpicker>
          </FormItem>
          <FormItem label="收件地址" prop="address">
            <i-input v-model="formData.address" size="large"></i-input>
          </FormItem>
          <FormItem label="手机号码" prop="phone">
            <i-input v-model="formData.phone" size="large"></i-input>
          </FormItem>
          <FormItem label="邮政编码" prop="postalcode">
            <i-input v-model="formData.postalcode" size="large"></i-input>
          </FormItem>
        </Form>
      </div>
      <div class="add-submit">
        <Button type="primary" @click="addAddress">添加地址</Button>
      </div>
    </div>
  </div>
</template>

<script>
import { validPhone } from '~/utils/validate'

if (process.browser) {
  var Distpicker = require('v-distpicker')
}
export default {
  name: 'AddAddress',
  data() {
    // 手机号码的校验
    const validatePhone = (rule, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('请输入正确手机号'))
      } else {
        callback()
      }
    }
    return {
      // 收货地址信息
      formData: {
        name: '',
        address: '',
        phone: '',
        postalcode: '',
        province: '福建省',
        city: '福州市',
        area: '长乐区'
      },
      // 表单校验规则
      ruleInline: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        postalcode: [
          { required: true, message: '请输入邮政编码', trigger: 'blur' }
        ],
        phone: [
          { required: true, trigger: 'blur', validator: validatePhone }
        ]
      }
    }
  },
  methods: {
    // 获取地址栏的信息
    getProvince(data) {
      this.formData.province = data.value
    },
    getCity(data) {
      this.formData.city = data.value
    },
    getArea(data) {
      this.formData.area = data.value
    },
    addAddress() {
    }
  },
  components: {
    Distpicker
  }
}
</script>

<style scoped>
.add-container {
  margin: 15px auto;
  width: 60%;
  min-width: 600px;
}
.add-title {
  margin-bottom: 15px;
  text-align: center;
}
.add-submit {
  display: flex;
  justify-content: center;
}
</style>
